import React, {useState} from 'react';
import {Form, Input, Button, Typography} from 'antd';

import "./index.less"
import common from "../../common";
import wechat from "./imgs/wechat.png";
import bg from "./imgs/bg.jpg";
import qq from "./imgs/qq.png";
import alipay from "./imgs/alipay.png";

const {Title} = Typography;

function Login(props) {

    let [data, setData] = useState({
        mobile:"",
        password:""

    })
    const onFinish = () => {
        common.ajax("post", "/passport/token/create", data).then(res => {
            common.setToken(res.token)
            common.ajax("get", "/passport/user/whoami").then(res => {
                window.localStorage.setItem("user", JSON.stringify(res))
                common.toast("登录成功")
                props.history.push('/')
            })
        })
    };

    return (
        <div className="Login">
            <div className="login" style={{width:"590px",height:"370px"}}>
                <div className="login-left">
                    <div className="login-left-content">
                        <div className="login-nav">安灯管理系统</div>
                        <div><input type="text" placeholder="请输入手机号" onChange={(e) => {
                            setData({...data, mobile: e.target.value})
                        }} className="login-input"/></div>
                        <div name="password"><input type="password" placeholder="请输入密码" onChange={(e) => {
                            setData({...data, password: e.target.value})
                        }} className="login-input"/></div>
                        {/*<div className="login-forget">忘记密码？</div>*/}
                        <div>
                            <button className="login-button" onClick={onFinish}>登录</button>
                        </div>
                        <div className="login-select">©2021上海汽车变速器有限公司</div>

                        {/*<div className="login-pic">*/}
                        {/*    <span><img className="login-pic-span" src={alipay} alt=""/></span>*/}
                        {/*    <span><img className="login-pic-span" src={wechat} alt=""/></span>*/}
                        {/*    <span><img className="login-pic-span" src={qq} alt=""/></span>*/}
                        {/*</div>*/}
                    </div>

                </div>
                <div className="login-right">
                    <p className="login-come">欢迎使用<br/>安灯管理系统</p>
                    {/*<p className="login-message">请输入你的信息<br/>工作人员稍后会与你取得联系</p>*/}
                    {/*<div>*/}
                    {/*    <span className="login-free">免费试用</span>*/}
                    {/*</div>*/}
                </div>
            </div>
        </div>
    );
}

export default Login;